// 获取数据
async function render(){
  
  // 顶部渲染
  const {data:{data}} = await  axios.get('/index/baseInfo')
  const {admin_num ,  advimg_num , advpos_num , article_num , user:{total , user_man , user_woman } , new_user , hot_article , all_cate} = data
  // console.log(admin_num,advimg_num,advpos_num,article_num,total)
  document.querySelector('#lsc-ctl').innerHTML = admin_num
  document.querySelector('#lsc-use').innerHTML = total
  document.querySelector('#lsc-atc').innerHTML = article_num
  document.querySelector('#lsc-adv').innerHTML = advpos_num
  document.querySelector('#lsc-advpic').innerHTML = advimg_num



  // 中部左侧渲染   
  const newUser = new_user.map(({username,sex})=>{
    const gender =  sex === 0 ? '女':'男'
    return`
    <li>
      <div class="num">${username}</div>
      <div class="gender">${gender}</div>
    </li>
    `
  }).join('')
  document.querySelector('.lsc-liebiao').innerHTML = newUser


  // 中部中侧渲染
  const hotArticle = hot_article.map(({title})=>{
    return `
    <li>
      <div class="num">${title}</div>
    </li>
    `
  }).join('')
  document.querySelector('.lsc-airticle').innerHTML = hotArticle


  // 中部右侧饼图
  function pie(){
    let myChart = echarts.init(document.getElementById('sex-pie'));
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '用户来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          itemStyle: {  // 设置饼图扇形的边框样式
            borderRadius: [10, 10, 10, 10],
            borderWidth: 5,
            borderColor: '#ffffff'
          },
          data: [
            { value: `${user_woman}`, name: '女性' },
            { value: `${user_man}`, name: '男性' },
          ]
        }
      ]
    };
  myChart.setOption(option);
  }
  pie()

  // 底部柱形图
  function bop(){
    const catenameArr = []
    const catenumArr = []
    // 遍历数组将名字和数据结构出来放到单独数组
    all_cate.forEach(({catename,num})=>{
      catenameArr.push(catename)
      catenumArr.push(num)
    })
  
    let myChart = echarts.init(document.getElementById('lsc-bottom'));

    const option = {
      title: {
        text: '各类文章发表数量',
        textStyle: {
          fontSize: 24 // 设置标题字号
        },
        padding: [10,0, 0, 0],// 设置标题与图形之间的间距
        left: '40%' // 将标题置于图表正上方
      },
      xAxis: {
        type: 'category',
        data: catenameArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: catenumArr,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          barWidth: 30
        }
      ]
    };


    myChart.setOption(option);
  }
  bop()
}
render()